<template>
  <div class="page-container-padding">
    <div>
      <span>
        <el-date-picker
          v-model="dateRange"
          style="width: 220px"
          type="daterange"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
        ></el-date-picker>
      </span>
      <span style="margin-left: 6px">
        <el-select v-model="statisticsType" style="width: 130px" size="mini">
          <el-option :value="0" label="默认统计方式"></el-option>
          <el-option :value="1" label="小组统计方式"></el-option>
        </el-select>
      </span>
      <span style="margin-left: 6px">
        <el-button
          type="primary"
          size="mini"
          :loading="dataLoading"
          @click="dateRangeQuery"
        >
          统计
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="success" size="mini" @click="currentMonthQuery">
          计本月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preMonthQuery">
          上一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextMonthQuery">
          下一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="yearQuery">全年</el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preYearQuery">
          上一年
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextYearQuery">
          下一年
        </el-button>
      </span>
    </div>
    <!-- 统计表 -->
    <div style="margin-top: 16px; width: 371px">
      <div>
        <span style="margin-right: 16px">图表解说统计表</span>
        <el-checkbox v-model="showNoLevelCount">未评级数量</el-checkbox>
      </div>
      <el-table border stripe :data="statisticsData">
        <el-table-column prop="admin_name" label="姓名" width="100">
          <template #default="scope">
            <div style="cursor: pointer" @click="toChangeDetailData(scope.row)">
              {{ scope.row.admin_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          :label="showNoLevelCount ? '数量(未评)' : '数量'"
          width="130"
        >
          <template #default="scope">
            <div style="cursor: pointer" @click="toChangeDetailData(scope.row)">
              <span>{{ scope.row.count }}</span>
              <span v-if="showNoLevelCount" style="margin-left: 6px">
                ({{ scope.row.no_level }})
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="level_count" label="评级" width="140" />
      </el-table>
      <div style="font-size: 12px; color: #f34d37; margin-top: 4px">
        {{ statisticsTip }}
      </div>
    </div>
    <!-- 展示详细条目 -->
    <div style="margin-top: 16px">
      <div>统计详细记录</div>
      <el-table border stripe :data="detailData">
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column prop="admin_name" label="姓名" width="100" />
        <el-table-column prop="publish_time" label="发布日期" width="160" />
        <el-table-column prop="title" label="标题">
          <template #default="scope">
            <div class="row-title" @click="toShowDetail(scope.row)">
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="level_flag" label="评级" />
        <el-table-column prop="create_time" label="创建时间" width="200" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <div class="delete-btn" @click="toDeleteRow(scope.row)">
              <i class="el-icon-delete"></i>
              删除
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹窗显示图形和解读 -->
    <el-dialog :visible.sync="showDetailDialog" :title="dialogObj.title">
      <div style="padding: 0 16px">
        <div class="image">
          <el-image fill="contain" :src="dialogObj.image_url"></el-image>
        </div>
        <div class="explain">{{ dialogObj.explanation }}</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getMonthDatePoint,
    getYearDatePoint,
    datetimeToStr,
  } from '@/utils/datetimeUtils'
  import {
    StatisticsChartExplanationRecord,
    DeleteChartExplanation,
  } from '@/api/departmentWork/chartExplanation'
  export default {
    data() {
      return {
        dateRange: [],
        statisticsType: 0,
        dataLoading: false,
        showNoLevelCount: false,
        statisticsData: [],
        statisticsTip: '',
        detailData: [],
        showDetailDialog: false,
        dialogObj: {
          title: '',
          image_url: '',
          explanation: '',
        },
      }
    },
    mounted() {
      this.setCurrentDates()
      this.queryPageData()
    },
    methods: {
      setCurrentDates() {
        let flag = new Date().getDate() < 4 ? 'previous' : 'current'
        this.dateRange = getMonthDatePoint(new Date(), flag)
      },
      // 查询统计数据
      queryPageData() {
        const start = datetimeToStr(this.dateRange[0], true, '')
        const end = datetimeToStr(this.dateRange[1], true, '')
        const st = this.statisticsType
        this.dataLoading = true
        StatisticsChartExplanationRecord(start, end, st).then((res) => {
          const data = res.data
          this.statisticsData = data.statistics
          this.statisticsTip = data.statistics_tip
          if (this.statisticsData.length > 0) {
            this.detailData = this.statisticsData[this.statisticsData.length - 1].data
          } else {
            this.detailData = []
          }
          this.dataLoading = false
        })
      },
      toChangeDetailData(row) {
        this.detailData = row.data
      },

      toShowDetail(row) {
        this.dialogObj.title = row.title
        this.dialogObj.image_url = row.image_url
        this.dialogObj.explanation = row.explanation
        this.showDetailDialog = true
      },

      toDeleteRow(row) {
        this.$baseConfirm(
          '确定删除这个记录吗?删除将不可恢复!',
          '删除确认',
          () => {
            DeleteChartExplanation(row.id).then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.queryPageData()
            })
          }
        )
      },

      // 指定日期范围查询
      dateRangeQuery() {
        this.queryPageData()
      },

      // 本月查询
      currentMonthQuery() {
        this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
        this.queryPageData()
      },

      // 上一月查询
      preMonthQuery() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
        this.queryPageData()
      },

      // 下一月查询
      nextMonthQuery() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
        this.queryPageData()
      },

      // 当前月份所在全年查询
      yearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'current')
        this.queryPageData()
      },

      // 上一年查询
      preYearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'previous')
        this.queryPageData()
      },

      // 下一年查询
      nextYearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'next')
        this.queryPageData()
      },
    },
  }
</script>
<style scoped lang="scss">
  .row-title {
    cursor: pointer;
    color: #0851bb;
    &:hover {
      font-weight: 700;
    }
  }
  .image {
    width: 100%;
    min-height: 300px;
    border-bottom: 1.5px solid #24acf2;
  }
  .explain {
    font-size: 15px;
    text-indent: 2em;
    line-height: 26px;
  }
  .delete-btn {
    color: #f34d37;
    cursor: pointer;
  }
</style>
